<script setup>
import { onMounted ,ref} from "vue";
import { ElMessage } from 'element-plus';
import indexSonSearch  from './TableSearch/indexSonSearch.vue';
import { searchObj,currentX,currentY,shuruchange,
    toggleShow,dianjidedanyuangehangshu, draggable,isDragging,
    isDraggingScale,startX,startY,youXiaJiaoX,youXiaJiaoY,
    handleMouseDown,handleMouseMove,handleMouseMoveScale,handleMouseUp,
    handleMouseUpScale,updatePosition} from './TableSearch/indexSon.js';

import {selectData1,selectDataWeb1,saveData1,deleteFun,insertFun2,updateFun  } 
from "../js/InsertDeleteSelectUpdates1205";

 
//A定义各种变量常量的位置
const shoushucaozuolist=ref([]);
const tableRefSs=ref(null);
const lblist=ref({
    name: 'VxeSelect',
    options:[
        {label:'手术',value:'1'},
        {label:'操作',value:'2'}
    ] 
})
//查询
const getshoushucaozuolist =async ()=>{
    const res =await selectData1('100012',{bh:props.getPageRigthDataObj.bh,ybms_ybid:'2'},"");
    console.log(res);
    shoushucaozuolist.value=res.ReContent;
}
//新增
const insert1=()=>{
    const insertObj={
       lb: 2, 
       icd:'', 
       icdmc: '', 
       zdr: '0000', 
       zdrq: '2024-05-22',
       saveflag:'1' ,
       bh:props.getPageRigthDataObj.bh ,
       ybms_ybid:'2'
    };
    insertFun2(insertObj,shoushucaozuolist.value,tableRefSs); 
}
//修改
let updateConst='';
const rowObj=ref({});
const update1=(row ,i )=>{
    updateFun(row,i,shoushucaozuolist.value,tableRefSs,updateConst,rowObj);
} 
//删除
const delete1=()=>{
    deleteFun( shoushucaozuolist.value,tableRefSs);
    saveData1(100013,"httphosptalserver",shoushucaozuolist.value,"");
    ElMessage({
                showClose: true,
                message: '删除数据成功',
                type: 'success',
                duration:'5000',
                offset:40 
    });
}
//保存
const save1= ()=>{
    saveData1(100013,"httphosptalserver",shoushucaozuolist.value,"");
    ElMessage({
                showClose: true,
                message: '保存数据成功',
                type: 'success',
                duration:'5000',
                offset:40 
            });
}

const props = defineProps(
    {
        getPageRigthDataObj:{
        type:Object,
        required:true
    }
})

watch(()=>props.getPageRigthDataObj.bh,(New,Old)=>{
    getshoushucaozuolist();
},{deep:true})



//传给搜索框的数据源-----------------------------------------------------------------------
const data1=ref([]);
const getfeiyongxioaleilist = (async () => {
    const res = await selectData1('100001',{ybms_ybid:'2'},"dzblhttphosptalserver");
    data1.value=res.ReContent;
    
});

//2.输入值要和那几个列进行匹配，比如可能是和简码或者名称进行匹配
const dataCell=ref(['lcicdmc','jm']);

//3.搜索框列表每列的宽度和顺序数组
const datalistlabel = ref([
   { value: 'jm', label: '简码', widths: '20%' },
   { value: 'ybicd', label: 'ICD编码', widths: '24%' },
   { value: 'lcicdmc', label: '名称', widths: '56%' }
]);
//监听搜索框的双击事件，如果双击了就把双击行的数据传给父组件，然后关闭搜索框，这里要把选中的数据进行赋值，注意改接收数据源名称
const xuanzhongFuZhi=(row)=>{
    shoushucaozuolist.value[dianjidedanyuangehangshu].icd=row.lcicd
   //把输入框的值赋给当前行
    shoushucaozuolist.value[dianjidedanyuangehangshu].icdmc=row.lcicdmc
   // 双击选中选项的同时，关闭搜索框，并且把相关位置的变量置0
    searchObj.value.isshowsearch=false;
    currentX.value=0;
    currentY.value=0;
    startX.value=0;
    startY.value=0;
    searchObj.value.x=0;
    searchObj.value.y=0;
};

onMounted(async()=>{
    getshoushucaozuolist();
    //打开这个界面就加载搜索框需要的数据源
    getfeiyongxioaleilist();
})
onUnmounted(() => {
  // 清理事件监听器
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mouseup', handleMouseUp);
  document.removeEventListener('mousemove', handleMouseMoveScale);
  document.removeEventListener('mouseup', handleMouseUpScale);
});
</script>

<template>
    <div style="height: 100%;width: 100%;">
        <indexSonSearch 
            ref="draggable" 
            class="draggable"
            :style="{
            top: searchObj.y + 'px',
            left: searchObj.x + 'px', 
            width: searchObj.width+'px',
            height: searchObj.height + 'px'  }"
            :data="searchObj.data" 
            :tableTitle="searchObj.tableTitle" 
            :dataCell="searchObj.dataCell"
            :inputValue="searchObj.inputValue"
            :searchObjw=searchObj.width
            :searchObjh="searchObj.height-75+'px'" 
            @close="toggleShow"
            @xuanzhong="xuanzhongFuZhi"     
            v-if="searchObj.isshowsearch" >
            <template #main-title>
                <!-- 把拖拽事件放到标题插槽的元素上面 -->
                <div 
                    style="background: darkseagreen;width: 100%;height: 100%;"  
                    @mousedown="(event ) =>handleMouseDown(event,1)"> 
                </div>   
            </template>
            <template #main-bottom>
                <!-- 把拖拽放大缩小事件放到标题插槽的元素上面 -->
               
                <img src="../../../../assets/images/zoom-internal.png"
                style="width: 100%;height: 100%;" 
                    @mousedown="(event ) =>handleMouseDown(event,2)" 
                     />
            </template>           
        </indexSonSearch >

        <div class="divtop">
            <div class="button-case">
                <div class="button-case-box xpFontSyzt" @click="insert1()"  > 
                    <img
                        src="@/assets/images/add_icon.png"
                        style="width: 16px; height: 16px; margin-right: 2px"
                        alt=""
                        srcset=""
                        />
                     <div>新增项目</div>
                </div>
                <div class="button-case-box xpFontSyzt" @click="delete1() ">
                    <img
                      src="@/assets/images/qingkong_icon.png"
                      style="width: 16px; height: 16px; margin-right: 2px"
                      alt=""
                      srcset=""
                    />
                    <div>清空</div>
                </div>
                <div class="button-case-box xpFontSyzt" @click="save1()">
                    <img
                      src="@/assets/images/save_icon.png"
                      style="width: 16px; height: 16px; margin-right: 2px"
                      alt=""
                      srcset=""
                    />
                    <div>保存</div>   
                </div>
            </div>
        </div>  
        <div style="height:calc(100% - 40px) ; " >
            <vxe-table
            ref="tableRefSs"
            border
            height= auto  
            
            :columnConfig="{resizable: true}"
            :row-config="{isCurrent:true,isHover:true}"
            :edit-config="{mode: 'cell', trigger: 'click',showIcon:false}"
            :data="shoushucaozuolist"
             
            @editActivated="(row) => update1(row,1)"   
            @edit-closed="(row) => update1(row,2)"   
            @cell-click="(row) => update1(row,3)"    
           >
            <vxe-column field="lb" title="类别" width="80"  :edit-render=lblist >   
            </vxe-column>
            <vxe-column field="icd" title="编码" width="140" :edit-render="{ name: 'input' }" >
                <template #edit="{ row } "  style=" pointer-events: none;" > 
                    <vxe-input  id="yuanshuicd" v-model="row.icd" 
                    @change=" (event ) => shuruchange(event,'yuanshuicd',row,tableRefSs,data1,dataCell,datalistlabel,2 ,1)">
                    </vxe-input>
                </template>
            </vxe-column>
            <vxe-column field='icdmc'     title='名称'   width=280 :edit-render="{ name: 'input'}"> 
            </vxe-column>
            <vxe-column field='zdr' title='修改人'  width=80   >
            </vxe-column>
            <vxe-column field='zdrq'    title='修改日期' width=170   >
            </vxe-column>
            <vxe-column    title='操作' width=70 >
                <el-popconfirm title="确认删除吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="delete1()"
                 
                >
                <template #reference>
                    <a  style="color: red;">删除</a>
                </template>
                </el-popconfirm>   
                
            </vxe-column>

          </vxe-table>
        </div>  
         
        
        
         
    </div>  
</template>
<style lang="scss"   scoped>
    //搜索框放大移动需要的样式
    .draggable {
        float: left;
        position:fixed ;
        z-index:1999;
        will-change: 'transform';  /* 开起硬件加速 */
    }


    .divtop{
        height: 40px;
        width: 100%;
        border: 1px solid #EBEBEB;
        .button-case{
             
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #333333;
            padding: 10px 12px 10px 12px;
            height: 40px;
            .button-case-box {
                display: flex;
                align-items: center;
                margin-right: 12px;
                cursor: pointer; /* 可选：使光标变为指针，表示可点击 */
            }
        }
    }
    .div20{
        width: 100%;
        height: 20px;
        margin-bottom: 12px;
        background-color: rgb(97, 114, 172);
    }
    .div32{
        width: 100%;
        height: 32px;
        margin-bottom: 12px;
        background-color: rgb(216, 220, 234);
        display: flex;
        gap: 12px;
        .div32s{
            display: flex;
            width: 100%;
        }
    }
    .div52{
        width: 100%;
        height: 52px;
        margin-bottom: 12px;
        background-color: rgb(243, 243, 243);
        display: flex;
        gap: 12px;
        .div52s{
            display: flex;
            width: 100%;
        }
    }
    .xpfont{
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
        text-align: right;
        font-style: normal;
        text-transform: none;
    }

</style>